<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-08-12 11:35:16
 * @LastEditors: Silence
 * @LastEditTime: 2023-08-16 09:59:33
-->
<template>
  <div>
    <div class="searchTop">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="点位搜索：">
          <el-input v-model="formInline.user" size="medium" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="搜索区域：">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="medium" type="primary" @click="centerDialogVisible=true">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_main">
      <div class="table_button">
        <el-button icon="el-icon-circle-plus-outline" size="medium" type="warning" @click="centerDialogVisible=true">新建</el-button>
      </div>
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          width="80"
        >
          <template slot-scope="{$index}">
            {{ $index+1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="点位名称"
        />
        <el-table-column
          prop="region.name"
          label="所在区域"
        />
        <el-table-column
          prop="businessType.name"
          label="商圈类型"
        />
        <el-table-column
          prop="ownerName"
          label="合作商"
        />
        <el-table-column
          prop="addr"
          label="详细地址"
        />
        <el-table-column
          label="操作"
          width="150"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="viewDetails(row.id)">查看详情</el-button>
            <el-button type="text" size="small" @click="centerDialogVisible=true">修改</el-button>
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="是否确定删除？"
              @onConfirm="onConfirm(row.id)"
            >
              <el-button slot="reference" type="text" size="small" style="color:red;marginLeft:10px">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>
      <Pagination :counts="counts" :pages="pages" @update="getLocationSearchList" />
    </div>
    <dialogCom :center-dialog-visible="centerDialogVisible" :rule-form="ruleForm" @clearData="clearData" @submitForm="submitForm" />
    <dialogTable :center-dialog.sync="centerDialog" :table-data-arr="tableDataArr" />
  </div>
</template>
<script>
import dialogCom from './components/dialogCom.vue'
import dialogTable from './components/dialogTable.vue'
import Pagination from '@/components/Pagination/index.vue'
import { getLocationSearchListApi, deleteLocationSearchApi, addLocationSearchApi, LookLocationSearchApi } from '@/api/area'
export default {
  name: '',
  components: {
    Pagination,
    dialogCom,
    dialogTable
  },
  data() {
    return {
      pages: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      counts: {
        totalCount: null,
        totalPage: 1
      },
      centerDialogVisible: false,
      centerDialog: false,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      formInline: {},
      tableData: [],
      ruleForm: {
        name: '',
        addr: '',
        regionId: '',
        businessId: '',
        ownerName: ''
      },
      tableDataArr: []
    }
  },
  computed: {
  },
  created() {
    this.getLocationSearchList()
  },
  methods: {
    // 获取点位列表
    async getLocationSearchList() {
      const res = await getLocationSearchListApi(this.pages)
      console.log(res)
      this.tableData = res.data.currentPageRecords
      this.counts.totalCount = res.data.totalCount
      this.counts.totalPage = res.data.totalPage
    },
    handleClick() {

    },
    // 删除点位
    async onConfirm(e) {
      // console.log(e)
      await deleteLocationSearchApi(e)
      this.getLocationSearchList()
    },
    clearData() {
      this.centerDialogVisible = false
      this.ruleForm = this.$options.data().ruleForm
    },
    async submitForm() {
      await addLocationSearchApi(this.ruleForm)
    },
    // 查看详情
    async viewDetails(id) {
      const res = await LookLocationSearchApi(id)
      console.log(res)
      this.tableDataArr = res.data
      this.centerDialog = true
    }
  }
}
</script>
<style lang="scss">
  .searchTop {
    .el-form-item__label {
      font-weight: 400;
    }
  }
  .dialog_ruleForm{
    label{
      font-weight: 400;
    }
    .el-form-item__content{
      .el-button:nth-child(1){
        margin-left: 100px;
      }
    }
  }
</style>
<style lang='scss'  scoped>
.searchTop{
  height: 64px;
  width: 100%;
  padding: 14px 0;
  padding-left: 20px;
  margin-bottom: 20px;
  display: flex;
  background-color: #fff;

}
.table_main{
  padding: 20px;
  background-color: #fff;
  .table_button{
    padding-bottom: 20px;
  }
}

</style>
